<template>
  <view class="controlCheck-container">
    <u-navbar placeholder autoBack>
      <view slot="center" style="width: 70vw">
        <TopBar class="tab-bar" :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange" backgroundColor="#fff" />
      </view>
    </u-navbar>
    <template v-if="listData.length > 0">
      <lubrication-item :list-data="listData" :tab-type="tabIndex" />
    </template>
    <view v-else>
      <empty></empty>
    </view>
  </view>
</template>

<script>
import { queryLubricationTask } from '@/api/equipment/lubrication'
import TopBar from '@/components/top-bar/index.vue'
import Empty from '@/components/cu-empty/index.vue'
import lubricationItem from './lubricationItem.vue'
import UNavbar from '@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue'

export default {
  components: {
    UNavbar,
    Empty,
    TopBar,
    lubricationItem
  },
  data() {
    return {
      tabBars: [
        {
          name: '待执行',
          index: 0
        },
        {
          name: '待确认',
          index: 1
        }
      ],
      tabIndex: 0,
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      isFinished: false
    }
  },
  onPullDownRefresh() {
    this.initData()
  },
  onShow() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getList()
  },
  methods: {
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
      this.initData()
    },
    initData() {
      this.listData = []
      this.isFinished = false
      this.pageNum = 1
      this.total = null
      this.getList()
    },
    getList() {
      if (this.isFinished) {
        return
      }
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.tabIndex
      }
      if (!this.total || this.total > this.listData.length) {
        queryLubricationTask(data)
          .then((res) => {
            if (this.pageNum === 1) {
              this.listData = res.rows
            } else {
              this.listData.push(...res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  ::v-deep .top-bar-item {
    font-size: 16px;
    color: #999999;
    font-weight: normal;
  }
  ::v-deep .top-bar-item.active {
    font-weight: bold;
    color: #454a5e;
  }
}
</style>
